<script setup>

import { ElMessage } from "element-plus";
import axios from "../../utils/http.js";

import { reactive, ref, onMounted } from "vue";


let dialogVisible = ref(false);
let search_input = ref()
const visible = ref(false)
let data = ref([])

onMounted(() => {
  getStudents()
  get_college_list()
})

function getStudents() {
  axios({
    url: 'info/checkinfo/',
    method: 'GET'
  }).then(res => {
    console.log(res.data.data);
    data.value = res.data.data
  })
}

// defineProps()
let dialogFormVisible = ref(false)
let formLabelWidth = '140px'
let college_list = ref([])
let select_class = ref()
let dog = ref(false)
let e_id = ref(0)

let addForm = ref()

const phone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('手机号不能为空'));
  }
  setTimeout(() => {
    let p = /^1[3-9]\d{9}$/;
    if (!p.test(value)) {
      callback(new Error('请输入正确的11位手机号'));
    } else {
      callback()
    }
  }, 100);
};

const number = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('身份证不能为空'));
  }
  setTimeout(() => {
    let p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    if (!p.test(value)) {
      callback(new Error('请输入18位身份证号'));
    } else {
      callback()
    }
  }, 100);
};

const rules = reactive({
  phone: [
    { validator: phone, trigger: 'blur' }],
  number: [
    { validator: number, trigger: 'blur' }],
})


let form = reactive({
  username: '',
  age: '',
  number: '',
  address: '',
  parents: '',
  phone: ''
})

let userinfo = ref({
  username: '',
  age: '',
  number: '',
  address: '',
  parents: '',
  phone: ''
})


function dialog(id) {
  e_id.value = id
  axios({
    url: 'info/getinfo/' + id + '/',
    method: 'get'
  }).then(res => {
    console.log(res.data.data);
    userinfo.value = res.data.data
    dog.value = true
  })
}

function dialogForm() {
  if (!addForm.value) return
  addForm.value.validate((valid) => {
    if (valid) {
      axios({
        method: "post",
        url: 'info/addinfo/',
        data: form,
        params: {
          class: select_class.value
        }
      }).then(res => {
        if (res.data.code == 200) {

          getStudents()
        } else {
          alert("创建失败")
        }
        dialogFormVisible.value = false
      }).catch(err => {
        console.log(err);

      })
    } else {
      ElMessage({
        message: '信息填写有误',
        type: 'warning'
      })
    }
  })


}
function get_college_list() {
  axios({
    url: 'cteacher/get_class_list/',
    method: 'GET'
  }).then(res => {
    college_list.value = res.data.data
  })
}

function confirm_delete(id) {
  console.log(id);
  axios({
    method: 'delete',
    url: 'info/deleteinfo/' + id + '/'
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'warning'
      })
    }
    getStudents()
  })
}



function edit() {
  axios({
    url: 'info/editinfo/' + e_id.value + '/',
    method: 'put',
    data: userinfo.value
  }).then(res => {

    if (res.data.code == 200) {
      ElMessage({
        message: '修改成功',
        type: 'success'
      })

    } else {
      ElMessage({
        message: res.data.msg,
        type: 'warning'
      })
    }
    getStudents()
    dog.value = false
  })
}

</script>
<template>
  <el-main>
    <el-button type="primary" @click="dialogFormVisible = true">新增一名学生</el-button>
    <el-dialog v-model="dialogFormVisible" title="新增学生" width="500">
      <el-form ref="addForm" :model="form" :rules="rules">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth" prop="number">
          <el-input v-model="form.number" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学生地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学生父母" :label-width="formLabelWidth">
          <el-input v-model="form.parents" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学生手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-tree-select v-model="select_class" :data="college_list" :render-after-expand="false" style="width: 240px"
            placeholder="请选择班级" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogForm">
          添加
        </el-button>
      </template>
    </el-dialog>
  </el-main>
  <el-table :data="data" style="width: 100%">
    <el-table-column prop="username" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    <el-table-column prop="number" label="身份证号" width="180"></el-table-column>
    <el-table-column prop="address" label="地址" width="180"></el-table-column>
    <el-table-column prop="parents" label="父母" width="180"></el-table-column>
    <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button type="text" size="small" @click="dialog(scope.row.id)" id="editButton">编辑</el-button>
        <el-popconfirm title="确认删除该用户？" confirm-button-text="是" cancel-button-text="否"
          @confirm="confirm_delete(scope.row.id)">
          <template #reference>
            <el-button size="small" type="danger" :icon="Delete">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dog" title="编辑学生" width="500">
    <el-form :model="userinfo">
      <el-form-item label="学生姓名" :label-width="formLabelWidth">
        <el-input v-model="userinfo.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生年龄" :label-width="formLabelWidth">
        <el-input v-model="userinfo.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证号" :label-width="formLabelWidth">
        <el-input v-model="userinfo.number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生地址" :label-width="formLabelWidth">
        <el-input v-model="userinfo.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生父母" :label-width="formLabelWidth">
        <el-input v-model="userinfo.parents" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生手机号" :label-width="formLabelWidth">
        <el-input v-model="userinfo.phone" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>

      <el-button type="primary" @click="edit">
        修改
      </el-button>
    </template>
  </el-dialog>
</template>
<style scoped>
#navtop {
  background-color: #5fbfff;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

img {
  width: 50px;
  border-radius: 50px;
}

.logo {
  float: left;
}

.title {
  float: left;
  font-size: 24px;
  line-height: 50px;
  margin-left: 20px;
}

.user {
  float: right;
}

.user span {
  color: #f5f5f5;
  font-size: 16px;
  line-height: 50px;
}

.user-info {
  display: inline-block;
  vertical-align: middle;
}

#main {
  width: calc(100% - 200px);
  height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

#aside {
  width: 200px;
  height: 100vh;
  background-color: #5fbfff;
  color: #fff;
}

#aside li {
  padding: 10px;
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid #fff;
  border-radius: 5px;
}

#aside li:hover {
  background-color: #fff;
  color: #5fbfff;
}
</style>
